<template>
<view>
    <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control style-type="text" :values="items" :active-color="activeColor" @clickItem="onClickItem" />
    </view>
    <view v-if="listData.length > 0">
        <view class="bg_color" v-for="item in listData">
            <view class="doctorInfo">
                <view class="doctor_img">
                    <image :src="item.doctorIcon"></image>
                </view>
                <view class="Infos" style="width: 70%; display: flex">
                    <view class="Infos_one">
                        <text style="font-size: 32rpx; font-weight: bold">{{
                                item.doctorName
                            }}</text>
                        <text style="padding-left: 20rpx; font-size: 29rpx">{{ item.deptName }}</text>
                    </view>
                    <view class="type">{{ typeStatus[item.type] }}</view>
                </view>
                <view style="
                            font-size: 29rpx;
                            color: #4ccdbc;
                            float: right;
                            margin-top: 25rpx;
                        " v-if="item.payStatus == 1">待付款</view>
            </view>
            <view style="font-size: 29rpx; color: #787878; line-height: 55rpx">
                <view>患者信息：<text class="perinfo">{{ item.patientName }} {{ item.age }}岁
                        {{ sexStatus[item.sex] }}</text></view>
                <view class="line1Overflow">病情描述：<text class="perinfo">{{
                            item.illnessConetxt
                        }}</text></view>
                <view>提交时间：<text class="perinfo">{{
                            item.addTime
                        }}</text></view>
                <view>问诊价格：<text class="perinfo" style="color: #e26d5f">￥{{ item.price }}</text></view>
            </view>
            <view class="bottom_content">
                <view v-if="item.payStatus != 1" @click="gotoChat(item)" class="btn_message">查看详情</view>
                <!--		<view-->
                <!--		 @click="goto('/pages/my/inquiryDetails?consultId='+item.id+'&orderId='+item.orderId)"-->
                <!--		 class="btn_message">查看详情</view>-->
                <view v-if="item.payStatus == 1 && item.type == 2" @click="toPayPrescribing(item.orderId)" class="btn_small">立即支付</view>
                <view v-else-if="item.payStatus == 1 && item.type == 1" @click="toPayTuWen(item.orderId)" class="btn_small">立即支付</view>
                <view v-if="item.status == 1 && item.payStatus == 0" @click="dialogToggle('info', item.id)" style="width: 80rpx" class="btn_message">取消</view>
            </view>
        </view>
        <!-- 提示窗示例 -->
        <uni-popup ref="alertDialog" type="dialog">
            <uni-popup-dialog :type="msgType" title="通知" content="确定取消？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
        </uni-popup>

        <!-- <uni-list>
                <uni-list-item
                        v-for="item in listData"
                        title="我的问诊"
                        direction="row"
                        class="pad30"

                >
                    <template>
                        <view slot="body" class="box" style="line-height:50rpx ;" @click="goto('/pages/my/inquiryDetails?consultId='+item.id+'&orderId='+item.orderId)">
                            <view class="box-top">
                                <view class="box-img">
                                    <image class="uni-media-list-logo" style="width: 60rpx;height: 60rpx;" :src="item.doctorIcon"></image>
                                    <view  class="box-name" >{{ item.doctorName }} {{item.deptName}} {{typeStatus[item.type]}} </view>
                                    <view  class="box-name" >患者信息：{{ item.patientName }} {{item.age}}岁 {{sexStatus[item.sex]}} </view>
                                    <view  class="box-name" >病情描述：{{ item.illnessConetxt }}</view>
                                    <view  class="box-name" >提交时间：{{ item.addTime }}</view>
                                    <view  class="box-name" >问诊价格：{{ item.price }}</view>

                                </view>

                                </view>
                            <view><button v-if="item.payStatus ==1"
                                          style="width: 300rpx"
                                          @click="goto()"
                                          type="primary">确认支付</button></view>

                            </view>

                    </template>
                </uni-list-item>

            </uni-list> -->
        <uni-load-more :status="statusLoad" :content-text="contentText" v-if="showLoadMore" />
    </view>

    <view class="noInfo_Img" v-else-if="showNoInfo">
        <image src="../static/images/icon_lack_message@2x.png"></image>
    </view>
</view>
</template>

<script>
import {
    inquiryList,
    refusal
} from '@/api/prescribing.js';
export default {
    data() {
        return {
            activeColor: '#52D0BB',
            items: ['进行中', '已完成', '已关闭'],
            current: 0,
            //分页开始
            showLoadMore: false,
            showNoInfo: false,
            statusLoad: 'more',
            contentText: {
                contentdown: '查看更多',
                contentrefresh: '加载中...',
                contentnomore: '没有更多',
            },
            sexStatus: {
                1: '男',
                2: '女',
            },
            typeStatus: {
                1: '图文咨询',
                2: '用药咨询',
                3: '免费咨询',
                4: '购药',
            },
            total: 0, //总条数
            nowCount: 0, //当前累计显示条数
            //分页结束
            listData: [], //列表数据
            payStatus: {
                0: '已支付',
                1: '未支付',
            },
            // 查询参数
            queryParams: {
                pageNum: 1, //第几页
                pageSize: 10, //每页显示条数
            },
            //状态 1进行中，2已取消，3已完成
            status: 1,
            id: '',
        };
    },
    onLoad() {
        this.showLoadMore = false;
        this.getList();
    },
    onReachBottom() {
        if (this.nowCount > 0 && this.nowCount >= this.total) {
            this.statusLoad = 'noMore';
        } else {
            this.showLoadMore = true;
            this.statusLoad = 'loading';
            this.getList();
        }
    },
    methods: {
        dialogToggle(type, id) {
            this.msgType = type;
            this.id = id;
            this.$refs.alertDialog.open();
        },
        dialogClose() {
            console.log('点击关闭');
        },
        dialogConfirm() {
            refusal({
                    id: this.id,
                })
                .then((res) => {
                    uni.showToast({
                        title: '退诊成功',
                    });
                    this.queryParams.pageNum = 1;
                    this.getList();
                })
                .catch((err) => {
                    uni.showToast({
                        title: '退诊失败',
                        icon: 'none',
                    });
                    console.log('错误#', res);
                });
        },
        goto(url) {
            uni.navigateTo({
                url: url,
            });
        },
        gotoChat(data) {
            let info = encodeURIComponent(JSON.stringify(data));
            // console.log(data, info, 'data000');
            uni.navigateTo({
                url: `/pagesSub/service/chat?item=${info}`,
            });
        },
        toPayPrescribing(id) {
            uni.navigateTo({
                url: `/pagesSub/homePage/prescribing/order?item=${id}`,
            });
        },
        toPayTuWen(id) {
            uni.navigateTo({
                url: `/pagesSub/homePage/consult/consulOrder?id=${id}`,
            });
        },
        onClickItem(e) {
            let _this = this;
            if (_this.current !== e.currentIndex) {
                _this.current = e.currentIndex;
                _this.nowCount = 0;
                _this.total = 0;
                _this.queryParams.pageNum = 1;
                _this.listData = [];
                if (_this.current == 0) {
                    _this.status = 1;

                } else if (_this.current == 1) {
                    _this.status = 2;
                } else if (_this.current == 2) {
                    _this.status = 3;
                }
                this.getList();

            }
        },
        getList() {
            let _this = this;
            let newData;
            let listData = _this.listData;
            let nowCount = _this.nowCount;
            let pageNum = _this.queryParams.pageNum;
            uni.showLoading({
                title: '加载中'
            });
            inquiryList(_this.status, _this.queryParams)
                .then((res) => {
                    let listNew = [];
                    if (_this.queryParams.pageNum != 1) {
                        newData = listData.concat(res.rows);
                    } else {
                        newData = res.rows;
                    }
                    _this.$set(_this, 'listData', newData); //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
                    //设置分页
                    _this.total = res.total;
                    _this.queryParams.pageNum = pageNum + 1;
                    _this.nowCount = nowCount + res.rows.length;

                    if (pageNum == 1 && res.rows.length <= 0) {
                        _this.showNoInfo = true;
                    }

                    uni.hideLoading();
                })
                .catch((res) => {
                    uni.hideLoading();
                });
        },
    },
};
</script>

<style scoped>
/deep/.segmented-control__text.data-v-064e9cd1 {
    font-size: 31rpx !important;
}

/deep/.segmented-control__item--text.data-v-064e9cd1 {
    border-bottom-width: 4rpx;
}

.doctorInfo {
    display: flex;
}

.bg_color {
    background-color: #ffffff;
    margin: 20rpx 30rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx 30rpx;
}

.doctor_img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 100%;
}

.doctor_img image {
    width: 90rpx;
    height: 90rpx;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.Infos {
    margin-left: 15rpx;
    margin-top: 20rpx;
}

.Infos_one {
    font-size: 30rpx;
}

.bottom_content {
    padding-top: 30rpx;
    padding-bottom: 20rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: flex-end;
}

.btn_small {
    font-size: 27rpx;
    color: #ffffff;
    padding: 2rpx 20rpx;
    text-align: center;
    border-radius: 40rpx;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    height: 55rpx;
    line-height: 55rpx;
}

.btn_message {
    margin-right: 20rpx;
    color: #4ccdbc !important;
    background-color: #ffffff !important;
    font-size: 27rpx;
    height: 55rpx;
    line-height: 55rpx;
    padding: 2rpx 20rpx;
    text-align: center;
    border-radius: 40rpx;
    border: 1rpx solid #4ccdbc;
}

.perinfo {
    margin-left: 5rpx;
    font-size: 29rpx;
}

.type {
    font-size: 27rpx;
    color: #4ccdbc;
    background-color: #e1fffb;
    border-radius: 20rpx;
    padding: 2rpx 10rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    margin-top: 5rpx;
    margin-left: 10rpx;
}
</style>
